<template>
  <div class="container-wrap">
		  <ClassifyTree @handleNodeClick="handleNodeClick"></ClassifyTree>
		  <div class="container-content-wrap">
			 <div class="head">
				 <span>资产列表</span>
				 <div>
					 <input type="text"  v-model="keywords" placeholder="请输入底板名称检索" @keydown="handleSearch"/>
				 </div>
			 </div> 
			  <ul>
				  <li title="上传模型" @click="editDialogRef.openDialog(classifyId,null,'add')" v-if="list_type=='model'">
						<div class="upload_model">
							<el-icon>
								<Plus />
							</el-icon>
						</div>
				  </li>
				  
 				  <li title="上传图标" @click="editIconDialogRef.openDialog(classifyId,null,'add')" v-if="list_type=='icon'" :style="li_style">
					     <div class="top-icon" style="margin-bottom: 5px;">
							 <img  src="/src/assets/images/upload.png"/>
						 </div>
						 <div class="bottom">
							 <span>上传</span>
						 </div>
				  </li> 
				  
				  <li title="创建样式" @click="editStyleDialog.openDialog(classifyId,null,'add')" v-if="list_type=='style'">
						<div class="upload_model">
							<el-icon>
								<Plus />
							</el-icon>
						</div>
				  </li>
				  
					<li v-for=" data in tableData" :style="li_style">
					  <!--资产加载icon-top-->
					  <div class="top" v-if="list_type=='model'">
							<img  :src="data.url"/>
							<div class="img-mask">
								<div class="opear">
									<p @click="handlePreview(data)">预览</p>
									<span class="menu-col-group">
										<span class="menu-col">
											<el-icon class="icon" @click="editDialogRef.openDialog(classifyId,data,'edit')"><EditPen /></el-icon>
											<span class="hidden">编辑</span>
										</span>
										<span class="menu-col">
											<el-icon class="icon" @click="handleDelete(data)"><Delete /></el-icon>
											<span class="hidden" >删除</span>
										</span>
									</span>
								</div>
							</div>
					  </div>
					  
					  <div class="top-icon" v-if="list_type=='icon'" style="margin-bottom: 5px;">
							<img :src="data.url" />
							<div class="img-mask">
								<div class="opear">
									<p @click="handlePreview(data)">预览</p>
									<span class="menu-col-group">
										<span class="menu-col">
											<el-icon class="icon" @click="editIconDialogRef.openDialog(classifyId,data,'edit')"><EditPen /></el-icon>
											<span class="hidden">编辑</span>
										</span>
										<span class="menu-col">
											<el-icon class="icon" @click="handleDelete(data)"><Delete /></el-icon>
											<span class="hidden" >删除</span>
										</span>
									</span>
								</div>
							</div>
					  </div>
					  
					  <div class="top" v-if="list_type=='style'">
							<img  :src="data.url"/>
							<div class="img-mask">
								<div class="opear">
									<p @click="handlePreview(data)">预览</p>
									<span class="menu-col-group">
										<span class="menu-col">
											<el-icon class="icon" @click="editStyleDialog.openDialog(classifyId,data,'edit')"><EditPen /></el-icon>
											<span class="hidden">编辑</span>
										</span>
										<span class="menu-col">
											<el-icon class="icon" @click="handleDelete(data)"><Delete /></el-icon>
											<span class="hidden" >删除</span>
										</span>
									</span>
								</div>
							</div>
					  </div>
					  
					  
					  
					  <div class="bottom">
							<span>{{data.name}}</span>
					  </div>
					</li>
				  

			  </ul>
		  </div>
		  
		<EditDialog ref="editDialogRef" @closeDialog="closed"></EditDialog>
		<EditIconDialog ref="editIconDialogRef" @closeDialog="closed"></EditIconDialog>
		<EditStyleDialog ref="editStyleDialog" @closeDialog="closed"></EditStyleDialog>
		
  </div>
  
</template>
<script lang="ts" setup>
 	import {
	  Plus,Delete,EditPen,Share,Memo
	} from '@element-plus/icons-vue' 
	import router from "@/router";
	import ClassifyTree from "./components/ClassifyTree.vue";
	import EditDialog from "./components/EditDialog.vue";
	import EditIconDialog from "./components/EditIconDialog.vue";
	import EditStyleDialog from "./components/EditStyleDialog.vue";
	
	
	
	
	import { listForAsset,deleteForAsset} from "@/api/asset";
	import { ref } from 'vue'
	
	const keywords=ref('');
	const classifyId=ref('');
	const tableData=ref([]);
	const loading = ref(false);
	const editDialogRef=ref();
	const editIconDialogRef=ref();
	const editStyleDialog=ref();
	
	
	const load=()=>{
		loading.value=true;
		listForAsset({
			classifyId:classifyId.value?classifyId.value:'-1',
			name:keywords.value
		})
		.then(({result}) => {
			 const _data=result
			_data.forEach(item => {
			  item['url']=import.meta.env.VITE_APP_BASE_API+'/api/v1/thumbnail/'+item.id
			})
			tableData.value= _data
		})
		.catch((e) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const list_type=ref('');
	const li_style=ref('');
	const handleNodeClick=(node:{})=>{
		tableData.value=[]
		list_type.value=node && node.type?node.type:''
		classifyId.value=node.id;
		setForLiStyle();
		load();
	}
	
	const handleSearch=(e)=>{
		if(e.keyCode == 13) {
			load();
		}
	}
	
	const closed=(e)=>{
		keywords.value='';
		classifyId.value=e.classifyId;
		load();
	}
	
	const setForLiStyle=()=>{
		if(list_type.value=='icon'){
			li_style.value='border-color:transparent;'
		}
		else if(list_type.value=='model'){
			li_style.value='border-color:#606475;'
		}
	}
	
	const handleDelete=(row :object)=>{
		ElMessageBox.confirm("确认删除["+row.name+"]吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		  .then(() => {
			  loading.value=true;
			  deleteForAsset({
			  	id:row.id
			  })
			  .then(() => {
				keywords.value='';
				classifyId.value=row.classifyId;
				load();
				ElMessage.success("删除成功");
			  })
			  .catch((e) => {
			  })
			  .finally(() => {
			  	loading.value=false;
			  });
		  })
		  .catch(() => ElMessage.info("已取消删除"));
	}
	onMounted(() => {
		load();
	});
</script>
<style scoped>
	
	
	/deep/.el-tree {
	    background:transparent;
		color: #ccc;
		font-size: 13px;
	}
	
	/deep/.el-tree-node__content{
		border-left: 2px solid transparent; 
		background:#2b2c2f;
	}
	
	/deep/.el-tree-node > .el-tree-node__content:hover{
		border-left: 2px solid #0080ff;
		background-color: #18222c;
	}
	
	/deep/.el-tree-node.is-current > .el-tree-node__content{
		background-color: #174a7d!important;
		border-left: 2px solid #0080ff; 
	}
	
	 /deep/.el-tree-node:focus &gt; .el-tree-node__content {
	    background-color: #223f53 !important;
	  }
	  
	/deep/.el-tree-node:focus>.el-tree-node__content {
		background-color: #174a7d!important;
		border-left: 2px solid #0080ff; 
	}
	
	.container-wrap{
		position: relative;
		height: 100%;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction:row ;
		flex-direction: row;
		border-top: 1px solid #515664;
		
		>.container-content-wrap{
			flex: 1;
			width: 100%;
			
			>.head{
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				width: 100%;
				height: 34px;
				background-color: #36373a;
				border-bottom: 1px solid #18181b;
				color: #ccc;
				font-size: 14px;
				>span{
					border-left-width: 3px!important;
					padding-left: 8px!important;
					height: 16px;
					line-height: 17px;
					font-size: 13px;
					color: #ccc;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					white-space: nowrap;
					border-left: 2px solid #0080ff;
					margin-left: 8px;
					padding-left: 3px;
				}
				>div{
					float: right;
					margin-top: -1px;
					padding-right: 0.625rem;
					>button{
					   width: 1.4375rem;
					   height: 1.875rem;
					   margin-right: 0.3125rem;
					   background: transparent;
					   color: #ccc;
					   font-size: 16px;
					   margin-top: 3px;
					   cursor: pointer;
					}
					>input[type=text]{
						background: #1f2632;
						border: 1px solid #4d505e;
						border-radius: 0.9375rem;
						outline-style: none ;
						caret-color:#0080ff;
						height: 1.625rem;
						color: #ccc;
						width: 17.5rem;
						padding-left: 1.125rem;
						padding-right: 1.125rem;
						background-image: url('/src/assets/icons/search.svg');
						
						background-size: 1.375rem;
						background-repeat: no-repeat;
						background-position-y: center;
						background-position-x: 15.625rem;
					}
					>input[type=text]:focus {
						border: 0px solid #0080ff;
					}
				}
			}
			
			>ul{
				margin-left: 0.625rem;
				margin-top: 0.3125rem;
				>li{
					float: left;
					list-style:none;
					margin: 2px 0px 0px 2px;
					/* margin: 15px 30px 40px; */
					-webkit-box-flex: 0;
					-ms-flex: 0 270px;
					flex: 0 270px;
					border: 1px solid #606475;
					cursor: pointer;
					position: relative;
					padding:5px;
					>.upload_icon{
						height: 108px;
						width: 108px;
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-pack: justify;
						-ms-flex-pack: justify;
						justify-content: space-around;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
						background: -webkit-gradient(linear,left top,left bottom,from(#36393f),to(#27292e));
						background: linear-gradient(180deg,#36393f,#27292e); 
						cursor: pointer;
						>.el-icon{
							font-size: 60px;
							font-weight: bold;
						}
					}
					
					>.upload_model{
						height: 183px;
						width: 256px;
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-pack: justify;
						-ms-flex-pack: justify;
						justify-content: space-around;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
						background: -webkit-gradient(linear,left top,left bottom,from(#36393f),to(#27292e));
						background: linear-gradient(180deg,#36393f,#27292e); 
						cursor: pointer;
						>.el-icon{
							font-size: 60px;
							font-weight: bold;
						}
					}
					
					>.top{
						border: 1px solid #606475;
						background: #121d2e;
						position: relative;
						height: 162px !important;
						width: 258px !important;
						outline:none ;
						>.img-mask{
							width: 100%;
							height: 100%;
							background: rgba(17,28,43,.95);
							position: absolute;
							left: 0;
							top: 0;
							height: 160px !important;
							width: 256px !important;
							display: none; 
							
							>.opear{
								width: 100%;
								height: 60px;
								position: absolute;
								left: 0;
								right: 0;
								bottom: 0;
								top: 0px;
								margin: auto;
								display: -webkit-box;
								display: -ms-flexbox;
								display: flex;
								-webkit-box-orient: vertical;
								-webkit-box-direction: normal;
								-ms-flex-direction: column;
								flex-direction: column;
								-webkit-box-align: center;
								-ms-flex-align: center;
								align-items: center;
								>p{
									width: 112px;
									height: 24px;
									border-radius: 2px;
									background: rgba(27,102,240,.8);
									color: rgba(255, 255, 255, 0.8);
									font-size: 12px;
									text-align: center;
									line-height: 24px;
									float: none;
									margin: 0 auto;
									cursor: pointer;
									margin-top: 20px;
								}
								>p:hover{
									background: rgba(27,102,240,1);
									color: rgba(255, 255, 255, 1);
								}
								>.menu-col-group{
									margin-top: 8px;
									width: 200px;
									-webkit-box-pack: center;
									-ms-flex-pack: center;
									justify-content: center;
									display: -webkit-box;
									display: -ms-flexbox;
									display: flex;
									-webkit-box-orient: horizontal;
									-webkit-box-direction: normal;
									-ms-flex-direction: row;
									flex-direction: row;
									-ms-flex-wrap: wrap;
									flex-wrap: wrap;
									>.menu-col{
									  position: relative;
									  display: -webkit-box;
									  display: -ms-flexbox;
									  display: flex;
									  -webkit-box-orient: vertical;
									  -webkit-box-direction: normal;
									  -ms-flex-direction: column;
									  flex-direction: column;
									  -webkit-box-align: center;
									  -ms-flex-align: center;
									  align-items: center;
									  cursor: pointer;
									  margin: 0 3px 5px;
									  >.icon{
									    font-size: 16px;
									    color: #a5b0cc;
									  }
									  >.hidden{
										border: 1px solid #0080ff;
										padding: 3px;
										width: 35px;
										position: absolute;
										top: 25px;
										color: #fff;
										display: none;
										font-size: 12px;
										text-align: center;
										z-index: 36;
										background: rgba(17,28,43,.95);
									  }
									}
									>.menu-col:hover{
										>.icon{
										  color: #0080ff;
										}
										>.hidden{
											display: block;
										}
									}
								}
							}
						}
						>.folder{
							display: flex;
							flex-wrap: nowrap;
							align-content: stretch;
							justify-content: space-around;
							align-items: center;
							height: 100%;
						}
						>img{
							height: 160px !important;
							width: 256px !important;
							-o-object-fit: cover;
							object-fit: cover;
							position: absolute;
						}
					}
					.top-icon{
						width: 120px;
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
						-webkit-box-pack: center;
						-ms-flex-pack: center;
						justify-content: center;
						outline: none;
						height: 120px;
						>.img-mask{
							width: 100%;
							height: 100%;
							background: rgba(17,28,43,.95);
							position: absolute;
	/* 						left: 0;
							top: 0; */
							height: 118px !important;
							width: 118px !important;
							display: none; 
							
							>.opear{
								width: 100%;
								height: 60px;
								position: absolute;
								left: 0;
								right: 0;
								bottom: 0;
								top: 0px;
								margin: auto;
								display: -webkit-box;
								display: -ms-flexbox;
								display: flex;
								-webkit-box-orient: vertical;
								-webkit-box-direction: normal;
								-ms-flex-direction: column;
								flex-direction: column;
								-webkit-box-align: center;
								-ms-flex-align: center;
								align-items: center;
								>p{
									width: 90px;
									height: 24px;
									border-radius: 2px;
									background: rgba(27,102,240,.8);
									color: rgba(255, 255, 255, 0.8);
									font-size: 12px;
									text-align: center;
									line-height: 24px;
									float: none;
									margin: 0 auto;
									cursor: pointer;
									margin-top: 20px;
								}
								>p:hover{
									background: rgba(27,102,240,1);
									color: rgba(255, 255, 255, 1);
								}
								>.menu-col-group{
									margin-top: 8px;
									width: 200px;
									-webkit-box-pack: center;
									-ms-flex-pack: center;
									justify-content: center;
									display: -webkit-box;
									display: -ms-flexbox;
									display: flex;
									-webkit-box-orient: horizontal;
									-webkit-box-direction: normal;
									-ms-flex-direction: row;
									flex-direction: row;
									-ms-flex-wrap: wrap;
									flex-wrap: wrap;
									>.menu-col{
									  position: relative;
									  display: -webkit-box;
									  display: -ms-flexbox;
									  display: flex;
									  -webkit-box-orient: vertical;
									  -webkit-box-direction: normal;
									  -ms-flex-direction: column;
									  flex-direction: column;
									  -webkit-box-align: center;
									  -ms-flex-align: center;
									  align-items: center;
									  cursor: pointer;
									  margin: 0 3px 5px;
									  >.icon{
									    font-size: 16px;
									    color: #a5b0cc;
									  }
									  >.hidden{
										border: 1px solid #0080ff;
										padding: 3px;
										width: 35px;
										position: absolute;
										top: 25px;
										color: #fff;
										display: none;
										font-size: 12px;
										text-align: center;
										z-index: 36;
										background: rgba(17,28,43,.95);
									  }
									}
									>.menu-col:hover{
										>.icon{
										  color: #0080ff;
										}
										>.hidden{
											display: block;
										}
									}
								}
							}
						}
						>img{
						    padding: 10px;
						    width: 100%;
						    height: 100%;
							border:1px solid #606475
						}
					}
					.bottom{
						
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-pack: justify;
						-ms-flex-pack: justify;
						justify-content: space-around;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
					}
					.time{
					    display: -webkit-box;
					    display: -ms-flexbox;
					    display: flex;
					    -webkit-box-pack: justify;
					    -ms-flex-pack: justify;
					    justify-content: space-between;
					    margin-top: 5px;
					    color: #aaa;
					    font-size: 12px;
					    height: 24px;
					    line-height: 24px;
					}
					
				}
				>li:hover{
					border: 1px solid rgb(0, 128, 255) !important;
					>.top>.img-mask{
						display: block;
					}
					>.top-icon>.img-mask{
						display: block;
					}
				}
			}
			
		}
	}

</style>
